<script>
	export default{
		data(){
			return {
				divClass: 'small',
				isActive: false,
        sex: 1,
        charStr: 'Z',
        userinfos: [{"id":1,"name":"卢高雅","sex":"0"},
          {"id":2,"name":"张三","sex":"0"},
          {"id":3,"name":"李四","sex":"1"}]
			}
		},
		methods: {
			changeSize(size){
				this.divClass = size
			}
		},
    computed:{
      sexMessage(){
        return this.sex == 0 ? '男' : '女'
      }
    }
	}
</script>

<template>
	<div :class="divClass"></div>
	<button @click="changeSize('small')">变小</button>
	<button @click="changeSize('big')">变大</button>

	<div class="divDefault" :class="{active: isActive}"></div>

  <!-- v-if -->
  <h1 v-if="sex == 0">男</h1>
  <h1 v-else>女</h1>

  <!-- v-show -->
  <h1 v-show="sex == 0">男</h1>
  <!--
    v-if v-show区别是什么？
    v-if修改的dom，如果v-if条件不成立，此dom就会从html删除
    v-show， 如果说显示条件不成立，会在dom上添加一个style="display:none;"
  -->
  <!-- 计算属性 -->
  <h1>{{sexMessage}}</h1>

  <h1 v-if="charStr == 'A'">A</h1>
  <h1 v-else-if="charStr == 'B'">B</h1>
  <h1 v-else-if="charStr == 'C'">C</h1>
  <h1 v-else>not a b c</h1>

  <table>
    <tr>
      <td>序号</td>
      <td>ID</td>
      <td>Name</td>
      <td>Sex</td>
    </tr>
    <!--遍历userinfos,取出各个对象的属性-->
    <tr v-for="(userinfo, index) in userinfos">
      <td>{{index+1}}</td>
      <td>{{userinfo.id}}</td>
      <td>{{userinfo.name}}</td>
      <td>{{userinfo.sex == '0' ? "男":"女"}}</td>
    </tr>
  </table>


</template>

<style>
	.big{
		width: 300px;
		height: 300px;
		background-color: antiquewhite;
	}
	
	.small{
		width: 150px;
		height: 150px;
		background-color: aqua;
	}
</style>